/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
(function($){
 
    //Attach this new method to jQuery
    $.fn.extend({

        //This is where you write your plugin's name
        easy: function(w, c) {
            
            this.attr("multiple", "multiple");
            this.attr("size", "1");
            
            this.attr("style", "height:25px;");
            this.after("<div id='con' style=''></div>");
            
            var options = $.map(this.children() ,function(option) {
                        
                return "<li class='o' id='o-"+option.value+"' value='"+option.value+"'>"+option.text+"</li>";
            }).join('');
            $("#con").html(options);
            
            //            $("#con:after").css({
            //                "content": ".",
            //                "display": "block",
            //                "clear": "both",
            //                "visibility": "hidden",
            //                "line-height": "0",
            //                "height": "0"
            //            });
            $("#con").attr("class", "clearfix");
            $("#con").css({
                "position":"absolute",
                "width":c*w+"px", 
                "background":"#FFF",
                "display": "inline-block;",
                "padding":"5px 5px 5px 20px",
                "clear": "both",
                "font-size": "1px"
            });
            $("#con li").css({
                "float":"left", 
                "width":w+"px"
            });
            $("#con").hide();
            //Iterate over the current set of matched elements
            return this.each(function() {
                $(this).load(function(){
                    });
                $(this).click(function(){
                    var con = $("#con");
                    if(con.is(":visible")){
                        $("#con").hide();
                    }else{
                        $("#con").show();
                    }
                    var obj = $(this);
                    $("li.o").click(function(){
                        var what = $(this);
                        var v = what.attr("id").split("-");
                        var options = $.map(obj.children() ,function(option) {
                            return option;
                        });
                        for(var i=0; i<options.length; i++){
                            if(options[i].value == v[1]){
                                options[i].setAttribute("selected", "selected");
                            }
                        }
                        $("#con").hide();
                    });
                    
                });
            });
        }
    });
     
//pass jQuery to the function,
//So that we will able to use any valid Javascript variable name
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )      
})(jQuery);


